<template>
  <div class="_forge-price-wrapper">
    <div class="_forge-price" :class="props.priceClass">
      <span>$</span>
      <span>{{ props.price || 0 }}</span>
      <slot />
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { priceBtnProps } from "./price-btn";

const props = defineProps(priceBtnProps);
</script>

<style lang="less" scoped>
._forge-price-wrapper {
  @apply flex items-center justify-center w-full;
  ._forge-price {
    padding: 0.31rem 0.5rem;
    font-size: 1.13rem;
    line-height: 1.31rem;
    min-width: 60%;
    max-width: 100%;
    text-align: center;
    background-color: var(--realbox-bg-price-btn);
    border-radius: var(--el-border-radius-base);
    overflow: hidden;
  }
}
</style>
